<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				float: left;
				
			}
			#text{
				float: right;
				height: 600px;
				width: 250px;
			}
			#word{
				position: relative;
				top: 200px;
				left: 50px;				
				font-size: 35px;
				color: darkorchid;
			}
			#word1{
				position: relative;
				top: 300px;
				left: 50px;
			}
			
			#loveHeart {
					float: left;
					width:670px;
					height:625px;
				}
			#garden {
	width: 100%;
	height: 100%;
}

#elapseClock {
	text-align: right;
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#words {
	font-family: "sans-serif";
	width: 500px;
	font-size: 24px;
	color:#666;
}

#messages{
	display: none;
}

#elapseClock .digit{
	font-family: "digit";
	font-size: 36px;
}

#loveu{
	padding: 5px;
	font-size: 22px;
	margin-top: 80px;
	margin-right: 120px;
	text-align: right;
	display: none;
}

#loveu .signature{
	margin-top: 10px;
	font-size: 20px;
	font-style: italic;
}

#clickSound{
	display:none;
}

#code {
	float: left;
	width: 440px;
	height: 400px;
	color: #333;
	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
	font-size: 15px;
	line-height: 1.5;
}

#code .string{
	color: #2a36ff;
}

#code .keyword{
	color: #7f0055;
	font-weight:bold;
}

#code .placeholder{
	margin-left:15px;
}

#code .space{
	margin-left:7px;
}

#code .comments{
	color: #3f7f5f;
}

#copyright{
	margin-top: 10px;
	text-align: center;
	width:100%;
	color:#666;
}

#errorMsg{
	width: 100%;
	text-align: center;
	font-size: 24px;
	position: absolute;
	top: 100px;
	left:0px;
}

#copyright a{
	color:#666;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(pig/iali50_1.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.content {
    width: 80%;
    color: #90F;
    height: 100%;
    top: 0px;
    left: 10%;
    font-size: 18px;
    line-height: 25px;
    font-family: "微软雅黑";
    margin-top: 0px;
}
body {
    color: #FFF;
    padding: 10px;
   
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.des {
    font-size: 15px;
    color: #3C3C3C;
    /*width: 100%;*/
    text-shadow : 0px 0px 1px #fff;
    z-index:1000;                   
    right:20px;
    position:fixed !important;
    bottom:0px;
}
.des a {
    color: #3C3C3C;
    text-shadow : 0px 0px 1px #fff;
}
</style>



		</style>
		<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/garden.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
	</head>
	
	
	<body>

		


		<div id="box">
			<div id="loveHeart">
				<canvas id="garden"></canvas>
				<div id="words">
					<div id="messages">
						生日快乐！
						<div id="elapseClock"></div>
					</div>
					<div id="loveu">
						希望你喜欢<br/>
						<div class="signature">工具人小陈同学</div>
					</div>
				</div>
			</div>
			<div id="text">
		<div id="word">
			来许个愿吧！<br />
			没人会看到哦！
		</div>
		<div id="word1">
			<input type="text" name="w1" id="w1" style="height: 50px; width: 240px; font-size: 20px;" /><br />
			<button onclick="myFunction()" style="height: 30px; width: 80px; position: relative; top: 20px;">许好了！</button> 
		</div>
		<script type="text/javascript">
			function myFunction()

{

var a = document.getElementById("w1").value;
			if(a.length<=0){
				alert("要许愿哦!")
			}else{
				window.location.href="index5.html";
			}

}
			
		</script>
		
	</div>
		</div>

	
	<script type="text/javascript">
		var offsetX = $("#loveHeart").width() / 2;
		var offsetY = $("#loveHeart").height() / 2 - 55;
		var together = new Date();
		together.setFullYear(1996, 3, 2);
		together.setHours(0);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);
		
		if (!document.createElement('canvas').getContext) {
			var msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			$("#copyright").css("position", "absolute");
			$("#copyright").css("bottom", "10px");
		    document.execCommand("stop");
		} else {
			setTimeout(function () {
				startHeartAnimation();
			}, 50);

			timeElapse(together);
			setInterval(function () {
				timeElapse(together);
			}, 50);

			adjustCodePosition();
			$("#code").typewriter();
		}
	</script>
	
	
	
	
	
	</body>
</html>
